<template>
  <div class="Modal">
    <div id="container" class="map" tabindex="0" style="height:400px;">
      <div class="info">
        <div class="input-item">
          <div class="input-item-prepend" />
          <input id="pickerInput" placeholder="">
        </div>
      </div>
    </div>
    <div style="display:flex;margin:15px 0;align-items: center;justify-content: flex-end;">
      <div>你选择的经纬度：{{lngLat}}</div>
      <Button type="primary" style="margin-left:15px"  @click="chooseAddress">确认选择</Button>
    </div>
  </div>
</template>

<script>

export default {
  name: "chooseAddress",
  // components: { editFrom },
  props: {
 
  },
  data() {
    return {
      map:'',
      city:'',
      marker:'',
      lngLat:'212121'
    }
     
  },
  mounted() {

    this.initMap()
  },
  methods: {

    chooseAddress(){
      this.$emit("getAddress", this.lngLat);
    },
      // 初始化地图
    initMap(){
      var self = this
      const map = new window.AMap.Map('container', {
        center: [106.674463, 26.619523],
        resizeEnable: true,
        zoom: 10
      })
     
      map.plugin('AMap.Geolocation', function() {
        var geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          buttonOffset: new window.AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: 'RB'
        })
        //  map.addControl(geolocation)
        geolocation.getCurrentPosition()
        window.AMap.event.addListener(geolocation, 'complete', onComplete) // 返回定位信息
        window.AMap.event.addListener(geolocation, 'error', onError) // 返回定位出错信息
      })
      // 解析定位结果
      function onComplete(data) {
        self.city = data.addressComponent.city
        map.setCenter([data.position.lng, data.position.lat]); //设置地图中心点

      }
      function onError(data) {
        console.log(5555, data)
      }

      // 设置鼠标样式
      map.setDefaultCursor('crosshair')

      self.map = map

       // 输入提示
     AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          city: self.city,
          input: 'pickerInput'
        //   autocompleteOptions:{
        //       outPutDirAuto: false
        //   }
        })

        // 初始化poiPicker
        self.poiPickerReady(poiPicker, map)
      })

    map.on('click', function(e) {
      if (self.marker) {
          self.marker.setMap(null);
          self.marker = null;
      }
       self.marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [e.lnglat.lng,e.lnglat.lat],
            offset: new AMap.Pixel(-13, -30)
        });
        self.lngLat = e.lnglat.lng+';'+e.lnglat.lat
        self.marker.setMap(map);
      })
    },
      //初始化 
   poiPickerReady(poiPicker, map) {
      window.poiPicker = poiPicker

      var marker = new window.AMap.Marker()

      var infoWindow = new window.AMap.InfoWindow({
        // offset: new window.AMap.Pixel(-300, 300)
      })

      // 选取了某个POI
      poiPicker.on('poiPicked', function(poiResult) {
        var source = poiResult.source
        var poi = poiResult.item
        var info = {
          source: source,
          id: poi.id,
          name: poi.name,
          location: poi.location.toString(),
          address: poi.address
        }
        //  window.AMap.setPointToCenter()
        marker.setMap(map)
        infoWindow.setMap(map)

        marker.setPosition(poi.location)
        infoWindow.setPosition(poi.location)

        // // infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>')
        infoWindow.open(map, marker.getPosition())

        map.setCenter(marker.getPosition())
        map.setZoom(17)
      })
    },
  }
};
</script>

<style scoped lang="stylus">
.info {
    z-index: 1;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    position: absolute;
    top: 1rem;
    background-color: #fff;
    width: auto;
    min-width: 22rem;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);
}
.input-text {
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    margin-right: .5rem;
}

#pickerInput {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    /* width: 100%; */
    height: 32px;
    padding: 4px 11px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 32px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all .3s;
}
</style>
